<template>
  <div class="popularity_box_container">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in list.pics" :key="index"
        ><img :src="item.pic" alt=""
      /></van-swipe-item>
    </van-swipe>
    <div class="popularity_container">
      <div class="popularity_box1">{{ this.list1.characteristic }}</div>
      <div class="popularity_box1">{{ this.list1.name }}</div>
      <div class="popularity_box2">
        <p>低价：￥{{ this.list1.pingtuanPrice }}</p>
        <p>原价：{{ this.list1.recommendStatus }}</p>
        <p>库存：{{ this.list1.originalPrice }}</p>
      </div>
    </div>
    <van-tabs class="tabs_container">
      <van-tab title="商品介绍"><div v-html="this.list.content"></div></van-tab>
      <van-tab title="商品评价">内容 2</van-tab>
    </van-tabs>
  </div>
</template>
<script>
import './goodsData.css'
export default {
  data() {
    return {
      list: {},
      list1: {},
    };
  },
  mounted() {
    let id = this.$route.query.id;
    // console.log(id);
    this.$API.getDetail({ params: { id: id } }).then((res) => {
      // console.log(res.data.data);
      this.list1 = res.data.data.basicInfo;
      this.list = res.data.data;
    });
  },
};
</script>
<style  >

.popularity_container{
  overflow: hidden;
}
.my-swipe {
  width: 100%;
  height: 5.5rem;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.popularity_container {
  width: 100%;
  height: 3rem;
  background-color: rgb(218, 218, 218);
}
.popularity_box1 {
  width: 100%;
  height: 0.7rem;
}
.popularity_box2 {
  width: 100%;
  height: 1.5rem;
  display: flex;
   align-items: center;
}
.popularity_box2 p:nth-child(1) {
  color: red;
}
.popularity_box2 p:nth-child(2) {
  margin-left: 0.625rem;
}
.popularity_box2 p:nth-child(3) {
  margin-left: 2.8125rem;
}
.tabs_container{
  width: 100%;
  height:100% ;
}
</style>